<!--商品详情-->
<style>


</style>
<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item in imgList" key="item">
        <img width="100%" height="300px" :src="item" @click="clickImg"></img>
      </swiper-slide>
    </swiper>
    <group>
      <cell>{{data.goodsName}}</cell>
      <cell :title="('单价')">{{price}} 元/箱</cell>
      <x-number :title="('数量')" :min="1" @on-change="changeNumber" v-model="goodsCount"></x-number>
      <cell :title="('总价')" v-model="totalAmount">{{totalAmount}} 元</cell>
    </group>
    <br/>
    <x-button type="primary" @click.native="comfireOrder()">确认购买</x-button>
  </div>
</template>
<script>
import {
  Group,
  Cell,
  XButton,
  Badge,
  XNumber
} from 'vux'
require('swiper/dist/css/swiper.css')
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'vue2-animate/dist/vue2-animate.min.css'

export default {
  components: {
    Group,
    Cell,
    XButton,
    Badge,
    XNumber
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      goodsId: this.$route.query.goodsId,
      data: [],
      imgList: [],
      goodsCount: '0',
      totalAmount: '0',
      price: '',
      swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        autoplay: 0,
        direction: 'horizontal',
        grabCursor: false,
        setWrapperSize: true,
        autoHeight: true,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: false,
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/goods/detail.json",
        params: {
          userId: this.userId,
          goodsId: this.goodsId
        },
        successFc: (response) => {
          this.data = response.data.data
          this.price = this.data.price
          this.totalAmount = this.data.price //刚进来默认1 箱
          this.imgList.push(this.data.imageOne)
          this.imgList.push(this.data.imageTwo)
          this.imgList.push(this.data.imageThree)
        }
      });
    },
    changeNumber(val) {
      this.totalAmount = this.price * val
    },
    comfireOrder() {
      if (this.goodsCount < 1) {
        this.$store.commit('updateToast', '至少选择1箱')
        return
      }
      this.$router.push({
        path: '/tourl/comfireOrder',
        query: {
          goodsId: this.goodsId,
          goodsCount: this.goodsCount
        }
      })
    }
  }
}

</script>
